<template>
  <el-container>
    <el-header>
      <h2>影像设置</h2>
    </el-header>
    <el-main>
      <el-form :model="form" label-width="150px">
        <el-form-item label="瓦片缓存大小 (MB)">
          <el-input
            v-model="form.cacheSize"
            type="number"
            placeholder="输入10-4096数字"
          />
        </el-form-item>

        <el-form-item label="LOD (细节层次)控制">
          <el-input
            v-model="form.lodControl"
            type="number"
            placeholder="输入1-10数字"
          />
        </el-form-item>

        <el-form-item label="最大渲染深度">
          <el-input
            v-model="form.maxRenderDepth"
            type="number"
            placeholder="输入0.1-30数字"
          />
        </el-form-item>

        <el-form-item label="切片分块尺寸">
          <el-input
            v-model="form.tileBlockSize"
            type="number"
            placeholder="输入1-256数字"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const form = ref({
      cacheSize: 100, // 瓦片缓存大小 (MB)，默认值
      lodControl: 5, // LOD 细节层次控制，默认值
      maxRenderDepth: 10, // 最大渲染深度，默认值
      tileBlockSize: 128 // 切片分块尺寸，默认值
    });

    // 保存方法，包含输入范围验证
    const save = () => {
      const { cacheSize, lodControl, maxRenderDepth, tileBlockSize } =
        form.value;

      if (cacheSize < 10 || cacheSize > 4096) {
        ElMessage.error("瓦片缓存大小必须在10到4096之间");
        return;
      }
      if (lodControl < 1 || lodControl > 10) {
        ElMessage.error("LOD 细节层次控制必须在1到10之间");
        return;
      }
      if (maxRenderDepth < 0.1 || maxRenderDepth > 30) {
        ElMessage.error("最大渲染深度必须在0.1到30之间");
        return;
      }
      if (tileBlockSize < 1 || tileBlockSize > 256) {
        ElMessage.error("切片分块尺寸必须在1到256之间");
        return;
      }

      ElMessage.success("保存成功！");
      console.log("保存的设置:", form.value);
      // 在这里可以添加实际的保存逻辑，例如 API 请求
    };

    const cancel = () => {
      ElMessage.info("取消操作");
      // 取消逻辑，例如重置表单
    };

    return { form, save, cancel };
  }
};
</script>

<style scoped>
.el-header {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
}
</style>
